<!-- 装修图文组件：图片轮播 -->
<template>
	<view class="fixed">
		<su-swiper :list="imgList" :dotStyle="data.indicator === 'dot' ? 'long' : 'tag'" imageMode="scaleToFill"
			dotCur="bg-mask-40" :seizeHeight="300" :autoplay="data.autoplay" :interval="data.interval * 1000"
			:mode="data.type" />
		<!-- 展示固定tab按钮 -->
		<view class="xfcc">
			<view class="xfc posi-r f-y-c bf bs15">
				<view @click="tapItem(iList[0].url)" class="f-1 f-c-c hlr">
					<view>
						<image :src="iList[0].iconUrl" class="img"></image>
					</view>
					<view class="f24 c6 mt20 l-n" v-if="iList[0].title">{{ iList[0].title }}</view>
				</view>
				<view @click="tapItem(iList[1].url)" class="f-1 f-c-c">
					<view>
						<image :src="iList[1].iconUrl" class="img"></image>
					</view>
					<view class="f24 c6 mt20 l-n" v-if="iList[1].title">{{ iList[1].title }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue';
	import sheep from '@/sheep';

	// 轮播图
	const props = defineProps({
		data: {
			type: Object,
			default: () => ({}),
		},
		styles: {
			type: Object,
			default: () => ({}),
		}
	});
	const imgList = computed(() =>
		props.data.items.map((item) => {
			const src = item.type === 'img' ? item.imgUrl : item.videoUrl;
			return {
				...item,
				type: item.type === 'img' ? 'image' : 'video',
				src: sheep.$url.cdn(src),
				poster: sheep.$url.cdn(item.imgUrl),
			};
		}),
	);
	const iList = props.data.list;
	const iconList = computed(() =>
		props.data.list.map((item, index) => {
			console.log(item);
			return {
				...item,
				type: item.type === 'img' ? 'image' : 'video',
				src: sheep.$url.cdn(src),
				poster: sheep.$url.cdn(item.imgUrl),
			};
		}),
	);

	// 点击轮播组件
	const tapItem = (url) => {
		sheep.$router.go(url);
	};
</script>

<style>
	.fixed .xfcc {
		padding-bottom: 20rpx;
	}

	.fixed .xfc {
		width: 90%;
		padding: 90rpx 0;
		margin: 0 auto;
		margin-top: -50rpx;
	}

	.bf {
		background: #fff;
	}

	.bs15 {
		border-radius: 15rpx;
		overflow: hidden;
	}

	.f-y-c {
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		-ms-grid-row-align: center;
		align-items: center;
	}

	.posi-r {
		position: relative;
		z-index: 1;
	}

	.hlt,
	.hlr,
	.hlb,
	.hll {
		position: relative;
	}

	.f-c-c {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.f-1 {
		flex: 1;
		min-width: 0;
	}

	.fixed .xfc .img {
		width: 160rpx;
		height: 160rpx;
	}

	.mt20 {
		margin-top: 20rpx;
	}

	.c6 {
		color: #666;
	}

	.f24 {
		font-size: 24rpx;
	}

	.l-n {
		line-height: normal;
	}
</style>